@import '../_mobile_config.scss';
.home-mobile {
    padding-bottom: 60px !important;
    padding-bottom: 16vh !important;
    background-color: #eeeeee;
    >.carousel {
        height: 180px;
        height: 48vw;
        width: 100%;
        width: 100vw;
        background-color: $color-bg;
    }
    hr {
        margin: 0;
        border-top: 10px solid #eeeeee;
        border-top: 2.66vw solid #eeeeee;
    }
    .category {
        background-color: #fff;
        padding: 20px 25px;
        padding: 6vw 6.66vw;
        display: flex;
        flex-flow: row wrap;
        .item {
            display: block;
            width: 33.3%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-size: 3.74vw;
            color: $color-text;
            &.bottom {
                margin-bottom: 30px;
                margin-bottom: 8vw;
            }
            i {
                color: $color-main;
                font-size: 25px;
                font-size: 6.66vw;
            }
        }
    }
    .youhui {
      background-color: #fff;
        h1 {
            margin-top: 0;
            margin-bottom: 15px;
            margin-bottom: 4vw;
            font-size: 15px;
            font-size: 4vw;
            color: $color-text;
            padding: 15px 20px;
            padding: 2.2vh 5.3vw;
        }
        >.imgs {
            display: flex;
            flex-flow: row nowrap;

            .left,
            .right {
                width: 170px;
                width: 45.3vw;
                height: 205px;
                height: 55vw;
                &.left {
                    margin-right: 5px;
                    margin-right: 1.3vw;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                &.right {
                    img{
                        width: 100%;
                        height: 100px;
                        height: 26.6vw;
                        &:first-child{
                            margin-bottom: 5px;
                            margin-bottom: 1.33vw;
                        }
                    }
                }
            }
        }
    }

    .yuyue{
      background-color: #fff;
    }
    .changxiaodanpin{
      background-color: #fff;
        padding: 15px 20px;
        padding: 2.2vh 5.3vw;
        h1 {
            margin-top: 0;
            margin-bottom: 15px;
            margin-bottom: 4vw;
            font-size: 15px;
            font-size: 4vw;
            color: $color-text;
        }
        .imgs{
            display: flex;
            flex-flow: row nowrap;

            a{
                display: block;
                width: 110px;
                width: 29.3vw;

                &:not(:last-child){
                    margin-right: 7.5px;
                    margin-right: 2vw;
                }

                img{
                    width: 100%;
                    height: 110px;
                    height: 29.3vw;
                    margin-bottom: 5px;
                    margin-bottom: 1.33vw;
                }

                h1{
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: block-axis;
                  height: 32px;
                  line-height: 16px;
                }
            }
        }
    }

    .floor{
      background-color: #fff;
      padding: 15px 10px 15px 15px;
      padding: 4vw 2.66vw 4vw 4vw;

      h1 {
          margin-top: 0;
          margin-right: 5px;
          margin-right: 1.33vw;
          margin-bottom: 15px;
          margin-bottom: 4vw;
          font-size: 15px;
          font-size: 4vw;
          color: $color-text;
      }

      .products{
        display: flex;
        flex-flow: row wrap;
        a{
          display: block;
          margin-right: 5px;
          margin-right: 1.33vw;
          width: 170px;
          width: 45.33vw;

          img{
            width: 100%;
            height: 170px;
            height: 45.33vw;
            margin-bottom: 5px;
            margin-bottom: 1.33vw;
          }

          h1{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: block-axis;
            height: 32px;
            line-height: 16px;
          }
        }
      }
    }
}
